<template>
    <div class="footerBox">
        <!-- 中间盒子 -->
        <div class="container">
            <!-- 上面区域 -->
            <div class="footerTopBox">
                <!-- 左侧位置 -->
                <div class="footerOneBox">
                    <h3 class="title">为什么选择途路</h3>
                    <div class="footerIntroBox">
                        <div class="commonBox leftImgBox1"></div>
                        <p class="pTitle blueColor">放心的服务</p>
                        <p class="pIntro">领先的独创服务 独创的保障体系</p>
                    </div>
                    <div class="footerIntroBox top10">
                        <div class="commonBox leftImgBox2"></div>
                        <p class="pTitle orangeColor">放心的价格</p>
                        <p class="pIntro">领先的独创服务 独创的保障体系</p>
                    </div>
                </div>
                <!-- 旅游资讯 -->
                <div class="footerTwoBox">
                    <p class="title">旅游资讯</p>
                    <ul>
                        <li><a href="http://www.wuyanjun.cn/#/main?error=1">酒店索引</a></li>
                        <li><a href="http://www.wuyanjun.cn/#/travel?error=1">攻略索引</a></li>
                        <li><a href="http://www.wuyanjun.cn/#/airticket?error=1">机票索引</a></li>
                        <li><a href="http://www.wuyanjun.cn/#/train-ticket?error=1">火车票导航</a></li>
                        <li><a href="http://www.wuyanjun.cn/#/travel?error=1">游轮索引</a></li>
                        <li><a href="http://www.wuyanjun.cn/#/steamer-ticket?error=1">汽车票索引</a></li>
                    </ul>
                </div>
                <!-- 加盟合作 -->
                <div class="footerTwoBox">
                    <p class="title">加盟合作</p>
                    <ul>
                        <li><a href="#">分销联盟</a></li>
                        <li><a href="#">友情链接</a></li>
                        <li><a href="#">企业礼品卡</a></li>
                        <li><a href="#">代理合作</a></li>
                        <li><a href="#">酒店加盟</a></li>
                        <li><a href="#">目的地及景区合作</a></li>
                        <li><a href="#">更多加盟合作</a></li>
                    </ul>
                </div>
                <!-- 关于携程 -->
                <div class="footerTwoBox">
                    <p class="title">关于途路</p>
                    <ul>
                        <li><a href="#">关于途路</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">诚聘英才</a></li>
                        <li><a href="#">用户协议</a></li>
                        <li><a href="#">隐私政策</a></li>
                        <li><a href="#">营业执照</a></li>
                        <li><a href="#">安全中心</a></li>
                        <li><a href="#">中心知识产权</a></li>
                    </ul>
                </div>
                <!-- 最右边的二维码 -->
                <div class="footerTwoBox" id="brNone">
                    <p class="codeTitle">微信公众号</p>
                    <div class="codeBox">
                        <img src="http://101.42.51.171:9000/smart/image/code.jpg" alt="">
                        <p class="font12">扫一扫，领旅游福利</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
</script>

<style lang='scss'>
/*底部版权区域*/
.footerBox {
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding-top: 28px;
    height: 200px;
    background-color: #f6f6f6;
}

.container {

    margin-left: 45px;
    padding-left: 20px;
}

.footerBox .footerTopBox {
    overflow: hidden;
}

/*第一个盒子*/
.footerOneBox {
    width: 245px;
    height: 150px;
    float: left;
    overflow: hidden;
    border-right: 1px dashed #ccc;
}

.footerBox .footerTopBox .title {
    color: #666;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.footerBox .footerTopBox .footerIntroBox .commonBox {
    width: 36px;
    height: 36px;
    float: left;
    margin-right: 10px;
}

.footerTopBox a:hover {
    color: #2577E3;
}

.footerTopBox .footerIntroBox .leftImgBox1 {
    background: url("http://101.42.51.171:9000/smart/image/pic_partner.png") no-repeat;
    background-position: -41px -250px;
}

.footerTopBox .footerIntroBox .leftImgBox2 {
    background: url("http://101.42.51.171:9000/smart/image/pic_partner.png") no-repeat;
    background-position: -41px -200px;
}

.footerBox .footerTopBox .footerIntroBox .pTitle {
    font-size: 16px;
}

.footerBox .footerTopBox .footerIntroBox .pIntro {
    font-size: 12px;
}

/*中间的携程资讯部分*/
.footerTwoBox {
    margin: 0 auto;
    float: left;
    border-right: 1px dashed #ccc;
    padding-right: 10px;
    margin-left: 40px;
    height: 150px;
}

.footerTwoBox ul {
    overflow: hidden;
    width: 180px;
}

.footerTwoBox ul li {
    margin-top: 10px;
    font-size: 12px;
    float: left;
    margin-right: 20px;
}

.footerTwoBox ul li a {
    color: #666;
    font-size: 12px;
}

.footerTwoBox .codeTitle {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    text-align: center;
}

.footerTwoBox .codeBox {
    width: 116px;
    height: 136px;
    border: 1px solid #EFEFEF;
    padding: 8px;
}

.footerTwoBox .codeBox p {
    color: #666;
}

#brNone {
    height: 200px;
    padding-right: 45px;
    padding-left: 20px;
}

.font12 {
    font-size: 12px;
}
</style>